<template>
	<view class="page">
		<cu-custom bgColor="bg-tran" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">功能介绍</block>
		</cu-custom>
		<view class="silk-ribbon">
			<span class="silk-ribbon1"><span>音乐</span></span>
			<view class="silk-text">
				<p>1.浏览全网音乐并进行后台播放</p>
				<p>2.听歌记录会缓存至个人中心</p>
				<p>3.如遇歌曲无法播放请尝试切换数据源</p>
			</view>
		</view>
		<view class="silk-ribbon">
			<span class="silk-ribbon4">常用</span>
			<view class="silk-text">
				<p>1.可查看所在地未来7天天气状况</p>
				<p>2.可查看今日风向、湿度等基本天气信息</p>
				<p>3.可查看今日疫情统计以及全国疫情风险地区</p>
			</view>
		</view>
		<view class="silk-ribbon">
			<view class="wrap"><span class="silk-ribbon6">娱乐</span></view>
			<view class="silk-text">
				<p> ● 提供一些类似于2048、扫雷等小游戏进行娱乐</p>
				<p> ● 使用简易聊天室和在线用户进行亲切友好的交谈（敬请期待...）</p>
			</view>
		</view>
		<view class="comm-content" style="">
			<view class="a">
				<view class="b"><text>敬请</text></view>
				<view class="b"><text>期待</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.page{
		position: relative;
		width: 100vw;
		height: 100vh;
		background: #ffc700;
		animation: gradient 15s infinite alternate;
	}
	
	@keyframes gradient {
		25% {
			background: #c84b96;
		}
	
		50% {
			background: #ca7061;
		}
	
		75% {
			background: #008fbe;
		}
	
		100% {
			background: #00caac;
		}
	}
	
	.silk-ribbon {
		display: flex;
		justify-content: left;
		width: 94%;
		height: 260rpx;
		position: relative;
		margin: 50rpx auto;
		background-color: #EEEEEE;
		color: #EEEEEE;
		
		.silk-text {
			color: #444444;
			width: 90%;
			margin: 50rpx 0 0 30rpx;
			font-size: 28rpx;
			p {
				margin: 15rpx;
			}
		}
	}
		
	.silk-ribbon:nth-child(3) {
		.silk-text {
			margin-top: 30rpx;
			margin-left: 130rpx;
		}
	}

	@media (max-width:500px) {
		.ribbon {
			width: 100%
		}

		/* .silk-ribbon:nth-child(even) {
			margin-right: 0%;
		} */
	}

	.silk-ribbon1 {
		position: absolute;
		top: -6px;
		right: 10px;
	}

	.silk-ribbon1:after {
		position: absolute;
		content: "";
		display: block;
		width: 0;
		height: 0;
		border-left: 53px solid transparent;
		border-right: 53px solid transparent;
		border-top: 10px solid #F8463F;
	}

	.silk-ribbon1 span {
		position: relative;
		display: inline-block;
		text-align: center;
		background: #F8463F;
		font-size: 14px;
		line-height: 1;
		padding: 12px 8px 10px;
		border-top-right-radius: 8px;
		width: 90px;
	}

	.silk-ribbon1 span:before,
	.silk-ribbon1 span:after {
		position: absolute;
		content: "";
		display: block;
	}

	.silk-ribbon1 span:before {
		background: #F8463F;
		height: 6px;
		width: 6px;
		left: -6px;
		top: 0;
	}

	.silk-ribbon1 span:after {
		background: #C02031;
		height: 6px;
		width: 8px;
		border-radius: 8px 8px 0 0;
		left: -8px;
		top: 0;
	}
	
	.silk-ribbon4 {
		position: absolute;
		left: 0;
		top: 15px;
		padding: 8px 10px;
		background: #00B3ED;
		box-shadow: -1px 2px 4px rgba(0, 0, 0, 0.5);
	}
	
	.silk-ribbon4:before,
	.silk-ribbon4:after {
		position: absolute;
		content: "";
		display: block;
	}
	
	.silk-ribbon4:before {
		width: 7px;
		height: 100%;
		padding: 0 0 7px;
		top: 0;
		left: -7px;
		background: inherit;
		border-radius: 5px 0 0 5px;
	}
	
	.silk-ribbon4:after {
		width: 5px;
		height: 5px;
		background: rgba(0, 0, 0, 0.35);
		bottom: -5px;
		left: -5px;
		border-radius: 5px 0 0 5px;
	}
	
	.silk-ribbon6 {
		display: inline-block;
		text-align: center;
		width: 150px;
		height: 30px;
		line-height: 30px;
		position: absolute;
		top: 30px;
		right: -50px;
		z-index: 2;
		overflow: hidden;
		transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		border: 1px dashed;
		box-shadow: 0 0 0 3px #57DD43, 0px 21px 5px -18px rgba(0, 0, 0, 0.6);
		background: #57DD43;
	}
	
	.wrap {
		width: 100%;
		height: 188px;
		position: absolute;
		top: -8px;
		left: 8px;
		overflow: hidden;
	}
	
	// .wrap:before {
	// 	content: "";
	// 	display: block;
	// 	border-radius: 8px 8px 0px 0px;
	// 	width: 40px;
	// 	height: 8px;
	// 	position: absolute;
	// 	right: 100px;
	// 	background: #4D6530;
	// }
	
	.a {
		display: flex;
		justify-content: center;
		padding: 30rpx 0;
		width: 750rpx;
	}
	
	.a:before {
		content: "";
		border: 25px solid;
		border-color: #ffffff #ffffff #ffffff transparent;
		margin-top: 10px;
		float: left;
	}
	
	.a:after {
		content: "";
		border: 25px solid;
		border-color: #ffffff transparent #ffffff #ffffff;
		margin-top: 10px;
		float: left;
	}
	
	.a text {
		display: inline-block;
		width: 100px;
		line-height: 50px;
		margin-top: 10px;
		text-align: center;
		background: #ffffff;
		position: relative;
		transition: background-color 0.5s, margin-top 0.3s;
	}
	
	.a .b {
		color: #000;
		text-decoration: none;
		height: 60px;
		font-size: 30rpx;
		overflow: hidden;
		float: left;
	}
	
	.a text:before {
		content: "";
		border-right: 10px solid #000;
		border-bottom: 10px solid #ccc;
		position: absolute;
		top: 50px;
		left: 0px;
	}
	
	.a text:after {
		content: "";
		border-left: 10px solid #000;
		border-bottom: 10px solid #ccc;
		position: absolute;
		top: 50px;
		right: 0px;
	}
	
	.a .b:hover text {
		margin-top: 0px;
		background: #a2dee7;
	}
</style>
